/* 一般在企业中使用原生开发时,会封装很多基础操作类辅助工具
    把所有小工具都挂载到window对象上,作为全局函数使用

*/

/* 
    使用说明:

        格式:

            操作说明:

            具体的函数

*/


/**
 * 功能说明
 * 
 * @method   方法
 * @type     是那类工具
 * @param    参数类型  具体参数   参数说明
 * @return   返回数据类型  说明
 * @description   对功能进行说明
 * @author    作者  @byTony
 * @date      2022-01-15 
 * 
*/


/**
 * 获取单个元素对象
 * 
 * @method   getEle(参数)
 * @param    {String}  selector   选择器
 * @description  主要用于获取原生对象
 * @return   {Object}  返回获取到的具体元素对象  
 * 
 * 
*/

function getEle(selector){
    return document.querySelector(selector)
}

/**
 * 获取多个元素对象
 * 
 * @method   getEleAll(参数)
 * @param    {String}  selector   选择器
 * @description  主要用于获取原生对象集合
 * @return   {Object}  返回获取到的具体元素对象集合 
 * 
 * 
*/

function getEleAll(selector){
    return document.querySelectorAll(selector)
}

/**
 * tab切换功能
 * 
 * @method   tab(参数1,参数2,参数3,参数4)
 * @param    {String}  selector   标题选择器 
 * @param    {String}  'active'   标题选中的效果样式类
 * @param    {String}  selector   内容选择器
 * @param    {String}  'on'   内容选中的效果样式类
 * @description  主要用于进行选项卡效果
 * 
 * 
*/

function tab(select1,pos1,select2,pos2){
    //1.获取相关DOM元素
    let tabLis=getEleAll(select1);
    let tabConts=getEleAll(select2);
    

    //遍历给li注册点击事件
    tabLis.forEach(function(v,i){
        // console.log(v);

        //点击事件
        v.addEventListener('click',function(){

            //把所有的li上的样式清除掉
            tabLis.forEach(function(vv,i){
                vv.classList.remove(pos1);
                tabConts[i].classList.remove(pos2)
               
            })

            //给当前li添加active
            this.classList.add(pos1);
           //对应内容 
           tabConts[i].classList.add(pos2)
           
        })

    })
}